<template>
  <div style="width: 86%;height: 86%;margin: 7%;border-radius: 15px">
  <div class="Head" style="text-align:center">
      <el-text class="mx-1" style="font-weight:bold;color:black;font-size: larger">Sign In to Woorkroom</el-text>
  </div>
  <div class="body">
    <div class="EmailAddress">
    <el-text style="font-weight:bold" type="info">Email Address</el-text><br>
    <el-input v-model="email" style="width: 370px" class="border" placeholder="youremail@gmail.com" size="large"/>
    </div>
    <div class="Password">
    <el-text style="font-weight:bold" type="info">Password</el-text><br>
    <el-input
             class="border"
             v-model="input"
             style="width: 370px"
             size="large"
             type="password"
             placeholder=""
             show-password
           />
    </div>
    <div class="Check">
      <el-checkbox v-model="checked1" label="Remember me" size="large" />
      <div class="Forgot">
          <el-text type="info">Forgot Password?</el-text>
      </div>
    </div>

    <div class="Sign">
    <el-button style="width:180px" size="large" type="primary" round>Sign In<el-icon><Right /></el-icon></el-button>
    </div>
    <div class="foot">
       <el-button
          v-for="button in buttons"
          :key="button.text"
          :type="button.type"
          link
          @click="this.$router.push('/register/step1')"
          >{{ button.text }}</el-button
       >
    </div>
  </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Right } from '@element-plus/icons-vue'
  const email = ref('')
  const input = ref('')
  const checked1 = ref(true)
  const buttons = [
    { type: 'primary', text: `Don't have an account?` },
  ] as const
</script>

<style scoped lang="scss">
.email.el-input :deep(.el-input__wrapper) {
  border-radius: 10px !important;
}
.border.el-input :deep(.el-input__wrapper) {
  border-radius: 10px !important;
}
.Head{
 margin-top:80px;
}
.body{
 margin-left:150px;
 }
.EmailAddress{
 margin-top:35px;
}
.Password{
 margin-top:35px;
}
.Check{
 margin-top:16px;
}
.Forgot{
 margin-top:-32px;
 margin-left:263px;
}
.Sign{
 margin-top:45px;
 margin-left:95px;
}
.foot{
 margin-top:15px;
 margin-left:110px;
}
</style>
